<template>
  <div class="tach">
    <MyNavbar title="面试技巧搜索" path="-1"></MyNavbar>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div v-if="!value">
      <h3>大家都在搜索</h3>
      <span class="hot" v-for="item in list" :key="item">
        <van-tag
          class="tag"
          size="medium"
          color="#eceaea"
          text-color="black"
          @click="search(item)"
          >{{ item }}</van-tag
        >
      </span>
      <h3>历史记录</h3>
    </div>
    <div class="pading">
      <Finditem v-if="value" v-model="form"></Finditem>
    </div>
  </div>
</template>

<script>
import { articlesTechnicTopSearch } from '@/api/find.js'
import Finditem from './finditem.vue'
export default {
  components: {
    Finditem
  },
  data () {
    return {
      list: [],
      checkValue: '',
      value: '',
      form: {
        q: ''
      }
    }
  },
  created () {
    this.getHot()
  },
  methods: {
    async getHot () {
      const res = await articlesTechnicTopSearch()
      //   console.log(res)
      this.list = res.data
      //   console.log(this.list)
    },
    async search (item) {
      this.checkValue = item
      //   console.log(this.checkValue)
      this.value = this.checkValue
      this.form.q = this.checkValue
    }
  }
}
</script>

<style lang="less" scoped>
h3 {
  padding: 36px;
  font-size: 36px;
  font-weight: normal;
}
.hot {
  .tag {
    margin-left: 32px;
  }
}
.pading {
  padding: 32px;
}
</style>
